import Vue from 'vue';
import Vuex from 'vuex';
import adminTab from "@/store/adminTab";


Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 在这里定义应用程序的状态变量
    //Vuex 中的状态是响应式的，这意味着当状态发生变化时，使用此状态的组件将自动重新渲染。


    //管理界面的导航栏是否收起
    isCollapse: false,
    currentUser: JSON.parse(localStorage.getItem("currentUser") || '{}'),
    // 当前登录的用户的角色
    role: JSON.parse(localStorage.getItem("role") || '{}'),
    // 登录后获取的令牌
    JwtToken: JSON.parse(localStorage.getItem("JwtToken") || '{}')
    // 如果从本地存储中获取的数据为 null 或 undefined，则使用提供的默认字符串作为初始值。
  },
  mutations: {
    // 同步方法，直接修改状态的方法,在其他组件或代码中可以直接调用这里的方法修改状态
    //Vuex store 中修改状态的唯一方式。Mutations 应该简单直接，用于跟踪状态的变化。
    loadCurrentUser(state, data) {
      state.currentUser = data;
      localStorage.setItem("currentUser", JSON.stringify(data));
    },
    loadRole(state, role) {
      state.role = role;
      localStorage.setItem("role", JSON.stringify(role));
    },
    setJwtToken(state,token){
      state.JwtToken = token;
      localStorage.setItem("JwtToken", JSON.stringify(token));
    },
    removeJwtToken(state){
      state.JwtToken = {};
      localStorage.removeItem("JwtToken");
    },
    // 修改导航栏展开和收起的方法
    CollapseMenu(state) {
      state.isCollapse = !state.isCollapse
    }
  },

  getters: {
    // 基于状态计算出的派生状态的方法
    //允许你基于 store 的状态计算出派生状态。Getters 对于在组件中使用数据前进行过滤或格式化非常有用。
  },
  actions: {
    // 包含异步操作并提交 mutations 的方法
    //提供了在提交 mutations 之前处理更复杂逻辑的方法。组件通常会派发（dispatch）actions，而不是直接提交 mutations。
  },
  modules: {
    // 用于将 store 拆分为更小部分的 Vuex 模块
    //允许你将 store 拆分为更小、更易于维护的部分。每个模块可以有自己的状态、mutations、actions、getters，甚至可以有嵌套模块。
    adminTab
  },
  plugins: []
});
